<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript" src="../js/lib/jquery-1.7.1.min.js"></script>
<div id="content">
<input type = "hidden" id = "category" name = "category" value = "square">
<div class="wrapper top">
	<div class="m-box w-signup">
		<div class="m-box-inner">
			<h2><img src="../image/member/tit_join.png" /></h2>
			<p class="guide">
				트래블로에 가입하시면 <em>TRIPHERE, TV 속 여행, 트래블로 전국맛집</em> 등의 스마트폰 어플리케이션도 함께 
				이용하실 수 있습니다. 이미 위 어플리케이션을 통해 회원가입 하셨다면, 바로 <a class="require-login" href="#">로그인</a> 하세요. :-)
			</p>			
			
			<form action="/member/signupPost.do" method="post">	
				<input type="hidden" name="regRouteType" value="W" />				
				<fieldset>
					<em class="title">이메일</em>
					<input name="email" class="alpha" type="text" value="" autoComplete="off" />
					<span class="valid" style="display:none">OK!</span>
				</fieldset>
				<fieldset>
					<em class="title">아이디</em>
					<input name="id" class="alpha" type="text" value="" autoComplete="off" />
					<span class="valid" style="display:none">OK!</span>
					<p>http://www.tripNote.co.kr/<em>id</em></p>
				</fieldset>
				<fieldset>
					<em class="title">비밀번호</em>
					<input name="password" type="password" class="check" />
					<span class="valid" style="display:none">OK!</span>
				</fieldset>
				<fieldset>
					<em class="title">비밀번호 확인</em>
					<input name="repassword" type="password" />
					<span class="valid" style="display:none">OK!</span>
				</fieldset>
				<fieldset>
					<em class="title">닉네임</em>
					<input name="nick" type="text" class="check" value="" autoComplete="off" />
					<span class="valid" style="display:none">OK!</span>
				</fieldset>
				<p class="agree">
					<em>가입하기</em>를 클릭하면 
					<a href="/service/policy/terms" target="_blank">이용약관</a>, 
					<a href="/service/policy/privacy" target="_blank">개인정보취급방침</a> 및 
					<a href="/service/policy/rule" target="_blank">운영원칙</a>에 동의하는 것으로 간주합니다.
				</p>
				<p class="submit">
					<input type="submit" class="button gray big" value="가입하기" />
				</p>
			</form>
			
				<div class="with">
					<p class="title">페이스북 또는 트위터 계정이 있으신가요?</p>
					<p class="message">간단한 연결 및 확인 과정을 거치고, 지금 바로 트래블로에 접속하세요.</p>
					<p class="link">
						<a href="#" class="link-facebook"><img src="../image/member/btn_login_facebook.png" /></a>
						<a href="#" class="service-ready"><img src="../image/member/btn_login_twitter_off.png" /></a>
					</p>
				</div>
			
		</div>
	</div>
	<script>
	(function(){
		var $wrapper = $('div.w-signup');
		var $form = $wrapper.find('form');
		var $linkFacebook = $wrapper.find('a.link-facebook'); // 외부연동
		var $btnSubmit = $form.find('input[type=submit]');
		
		function setValid($input, message){
			var $valid = $input.siblings('span.valid');
			
			if (!$input.val()) {
				$input.removeClass('error');
				$valid.hide();
			} else if (!message) {
				$input.removeClass('error');
				$valid.show().text('OK!').removeClass('error').removeClass('line2');
			} else {
				$input.addClass('error');
				$valid.show().addClass('error').text(message);
				var validHeight = $valid.height();
				if (validHeight > 34) {
					$valid.addClass('line2');
				} else if (validHeight < 34) {
					$valid.removeClass('line2');
				}
			}
		};
		function checkPasswordContirm(){
			var $repassword = $form.find('input[name=repassword]');
			setValid($repassword, $form[0].password.value!=$repassword.val() ? '비밀번호가 일치하지 않습니다.' : null);
		}

		function validateInput(input){
			var $input = $(input);
			if (this.name=='repassword') {
				checkPasswordContirm();
			} else {
				$.getJSON('/member/validate.json', {
					field : input.name,
					value : input.value
				}, function(result){
					setValid($input, result.status==1 ? null : result.message);
					checkPasswordContirm();
				});
			}
			if (input.name=='id') {
				$input.siblings('p').find('em').text(input.value);
			}
			if ($form.find('span.valid:visible').not('.error').length==5) {
				$btnSubmit.removeClass('gray');
			} else {
				$btnSubmit.addClass('gray');
			}
		}

		var $inputs = $wrapper.find('fieldset>input');
		$inputs.bind('keyup change', function(){
			validateInput(this);
		});
		// 초기화
		$inputs.each(function(idx, input){
			validateInput(input);
		});

		$form.submit(function(ev){
			if ($btnSubmit.hasClass('gray')) {
				ev.preventDefault();				
			} else {
				atto.wait($form);
				$btnSubmit.addClass('gray').val('처리중..');
			}
		});
		$linkFacebook.click(function(ev){
			ev.preventDefault();
			atto.require(['atto.common.login'], function(){
				atto.common.login.facebook();
			});
		});
	})();
	</script>
</div>
</div>